<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="goods.css">

</head>

<body>
  <div class="goodsinfo">
    <form action="" class="choose">
      <ul>
        <!-- <li class="product">
          <dl>
            <dt>颜色：</dt>
            <dd><a class="selected" href="javascript:;">白色</a><a class="" href="javascript:;">黑色</a></dd>
          </dl>
        </li>
        <li class="product">
          <dl>
            <dt>内存：</dt>
            <dd><a class="selected" href="javascript:;">2G</a><a class="" href="javascript:;">4G</a></dd>
          </dl>
        </li> -->
      </ul>
    </form>
  </div>
  <script>
    // data 变量表示的是服务端发给我们的商品的sku(货品)信息，根据数据 将可以选择的信息显示在ul标签中，最终显示结果  颜色：白色 黑色  内存：2G 4G 倒推
    var data = [{
      "id": 6,
      "goodsSku": {
        "颜色": "白色",
        "内存": "2G"
      },
    },
    {
      "id": 7,
      "goodsSku": {
        "颜色": "白色",
        "内存": "4G"
      }
    },
    {
      "id": 8,
      "goodsSku": {
        "颜色": "黑色",
        "内存": "2G"
      }
    },
    {
      "id": 9,
      "goodsSku": {
        "颜色": "黑色",
        "内存": "4G"
      },
    }
    ];
    // 上面的data 数据中每一个元素表示的是一组可能的组合，如果需要将信息显示，
    //需要对已有的data 进行整理，需要将具体有多少类型，每种类型有多少值需要整理
    // 上面的data 数据中每一个元素表示的是一组可能的组合，如果需要将信息显示，需要对已有的data 进行整理，需要将具体有多少类型，每种类型有多少值需要整理
    /*
        显示的颜色、内存叫做商品属性  白色黑色叫做商品属性值
        1、一个商品具体有多少个商品属性不确定，在显示商品属性相关的信息时必定是要用循环
        所以目前分析的最终结果格式为数组  ,数组中 每一个元素表示一个商品属性的完整信息(需要记录 颜色 并且可用的属性值为 白色黑色) [] 
        2、由于每一个商品属性都存在名称与值 数组中每一个元素为对象 初步分析 格式为
        [
            {name:'颜色',values:['白色','黑色']}
         
        ]
        3、现有的data数据 是已经组合完成之后的结果 需要转换为 现在分析结果的格式
        当处理数据{"颜色": "黑色","内存": "4G"} 首先需要在数组中找到 那个元素记录着颜色，如果没找到 添加一个元素来记录颜色与对应的值 否则找到存在颜色的属性 还需要再次判断现在的黑色值是否已经记录 如果没有记录就添加否则就忽略。所以上面这个操作比较麻烦
        4、目前需求是要知道那个商品属性对应着属性值又那些。所以考虑将最终结果设置为对象格式。对象的属性名称使用商品属性表示 对象属性值 就使用具体商品属性值
        {
            "颜色":['白色']
        }

    */
    var result = {};
    data.forEach(function (item) {
      for (var j in item.goodsSku) {
        //console.log(j)
        if (result[j] == undefined) {
          result[j] = [item.goodsSku[j]]
        } else {
          //如果存在，判断是否有这个值
          !result[j].includes(item.goodsSku[j]) && result[j].push(item.goodsSku[j])
        }
      }
      //console.log(data[i].goodsSku)
    })

    var str = '';
    for (var i in result) {
      str += `<li class="product">
                    <dl>
                        <dt>${i}</dt>
                        <dd>`
      result[i].forEach(function (item, index) {
        str += `<a class="${index == 0?'selected':''}" href="javascript:;">${item}</a>`
      })
      str += `</dd>
                    </dl>
                </li>`
    }

    document.querySelector('.choose>ul').innerHTML = str;
  </script>
</body>

</html>